<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Profile of Gert Spoelstra</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/pictogram-button.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  	<div id="content">
		<div id="navigation">
		<ul>
		<li><a class="button-bevel cyan" href="index.php">Home</a></li>
		<li><a class="button-bevel cyan" href="index.php">Portfolio</a></li>
		<li><a class="button-bevel cyan" href="index.php">Biography</a></li>
		<li><a class="button-bevel cyan" href="index.php">Work Experience</a></li>
		<li><a class="button-bevel cyan" href="index.php">Skills</a></li>
		<li><a class="button-bevel cyan" href="index.php">Contact</a></li>
		</ul>
		<div class="clearfix"></div>
		</div>
		<div id='text' style="position:relative; width:auto; height:200px;">Here is a story about me the designer telling you the reader that this is about my profile page!</div>
		<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
		<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
 		<div id="boxholder">

				<div class="element"><div class="number">1</div><a href="webshop.php"><img src="Images/webshop_small.jpg" alt="Webshop"></a></div>
				<div class="element"><div class="number">2</div><a href="#"><img src="Images/webshop_small.jpg" id="greyscale1" alt="Rent Manager"></a></div>
				<div class="element"><div class="number">3</div><a href="#"><img src="Images/webshop_small.jpg" alt="Game"></a></div>
				<div class="element"><div class="number">4</div><a href="#"><img src="Images/webshop_small.jpg" alt="Unemployment Agency"></a></div>
				<div class="element"><div class="number">5</div><a href="#"><img src="Images/webshop_small.jpg" alt="Forum"></a></div>
				<div class="element"><div class="number">6</div><a href="mcp.php"><img src="Images/webshop_small.jpg" alt="Project Manager"></a></div>
		</div>
 	</div>
  	<div id="footer">
    	<p>Footer</p>
	</div>
</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/jquery.arctext.js"></script>
<script type="text/javascript" src="js/fittext.js"></script>
<script type="text/javascript">
$('#text').fitText(0.5);
$(function(){
      
      var $container = $('#boxholder');
      
      
      // add randomish size classes
      $container.find('.element').each(function(){
        var $this = $(this),
            number = parseInt( $this.find('.number').text(), 10 );
        if ( number % 7 % 2 === 1 ) {
          $this.addClass('width2');
        }
        if ( number % 3 === 0 ) {
          $this.addClass('height2');
        }
      });
      
      $container.isotope({
        itemSelector: '.element',
        masonry : {
          columnWidth : 120
        }
      }).toggleClass('variable-sizes').isotope('reLayout');
      
      
      // change size of clicked element
      $container.delegate( '.element', 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
      });

      // toggle variable sizes of all elements
      $('#toggle-sizes').find('a').click(function(){
        $container
          .toggleClass('variable-sizes')
          .isotope('reLayout');
        return false;
      });
	  $('#shuffle').find('a').click(function(){
        $container.isotope('shuffle');
        return false;
      });

      
    });
</script>
</body>
</html>